<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
	
	#mydiv{
		width: 1500px;
		height: 950px;
		position: relative;
		margin: auto;
	}
	#img1{
		width:100px;
		height:80px;
		background-color: red;
		position: absolute;
		left: 30px;
	}
	
	#div2{
		width: 1500px;
		height: 950px;
		background-image:url("images/background1.jpg");
		background-repeat:no-repeat;
		background-size:contain;
		position: absolute;
		margin: auto;
		top: 100px;
	}
	#img2{
		width: 150px;
		height: 150px;
		position: absolute;
		left: 450px;
		top: 10px;
	}
	div p:nth-of-type(1){
		position: absolute;
		left: 550px;
		top: 630px;
	}
	div p:nth-of-type(2){
		position: absolute;
		left: 540px;
		top: 670px;
	}
	h1{
		text-align: center;
	}
	.divx{
		width:500px;
		height:400px;
		text-align:center;
		line-height:150%;
		position: absolute;
		top: 140px;
		left:800px;
	}
	#span1{
		position: absolute;
		left: 1170px;
		font-size: 30px;
		color: #aaa;
	}
	#span2{
		position: absolute;
		width:500px;
		height: 30px;
		font-size: 25px;
		font-weight: bold;
		left:0px;
		top:80px;
	}
	#span3{
		position: absolute;
		width:500px;
		height: 30px;
		font-size: 25px;
		font-weight: bold;
		left:0px;
		top:130px;
	}
	#span4{
		position: absolute;
		width:500px;
		height: 100px;
		font-size: 25px;
		font-weight: bold;
		left:0px;
		top:180px;
	}
	#myimg{
		position: absolute;
		top:-24px;
	}
	#myid{
		position: absolute;
		width:107px;
		height: 20px;
		font-size: 15px;
		top:5px;
		left:380px;
	}
	.box{
	background-color:#1E90FF;
	border:none;
	font-weight:bold;
	color:#fff;
	font-size:20px;
	border-radius: 50px;
	position:relative;
	right:20px;
	top:120px;
	left:-70px;
	height: 40px; 
	width:60px;
}
.box2{
	background-color:#1E90FF;
	border:none;
	font-weight:bold;
	color:#fff;
	font-size:20px;
	border-radius: 50px;
	position:relative;
	height: 40px; 
	width:60px;
}
a{
	text-decoration:none;
	position:relative;
	top:80px;
	left:80px;
}
h2{
	position:relative;
	top:100px;
	left:0px;
	color:red;
}
</style>
</head>
<body>
	<div id="mydiv">
		<img src="images/logo.png" id="img1">
		<span id="span1">您好！欢迎光临叮咚易购</span>
		<div id="div2">
			<img src="images/1.jpg" id="img2">
				<div class="divx">
					<h1>叮咚易购用户登录</h1>
					<form action="loginservet" method="post">
						<span id="span2">
							用户名：<input type="text" name="userName" id="userName">
						</span><br>
						<span id="span3">
							密码：<input type="text" name="userPass" id="userPass">
						</span><br>
						<span id="span4">
							验证码:<input type="text" name="code" ><img src="loginservet" id="myimg">
							<a href="javascript:changeCode()" id="myid"><br>看不清？换一张</a>
						</span><br>
						<input class="box" type="submit" value="登录">
					</form>
					<a href="register.jsp"><input class="box2" type="submit" value="注册">
				</a>
				<h2>${meg }${mes }</h2>				
				</div>
							<p>川ICP备133880号|合字A1.A2-20230003|营业执照</p>
			<p>Copyright&copy;叮咚易购2020-2024,All Right Reserved</p>
		</div>
	</div>
</body>
<script>
	function $(id){
		return document.getElementById(id);
	}
	function changeCode(){
		var date = new Date();
		var time=date.getTime();
		$("myimg").src="loginservet?num=1"+time;
	}
</script>
</html>